import React, { useState, useEffect } from 'react'
import { Tabs } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
import { Agenda } from '@nutui/icons-react'
import { Button } from '@nutui/nutui-react'
import { Input } from '@nutui/nutui-react'
import { useLocation } from 'react-router-dom'
import { Popup, Cell } from '@nutui/nutui-react'
import axios from 'axios'


export default function Jzw()
{
  const [showBottom, setShowBottom] = useState(false)
  const [showBottom1, setShowBottom1] = useState(false)
  const location = useLocation()
  const _id = useLocation().search.split('=')[1]
  const [jijian,setjijian] = useState({})
  const [shoujian,setshoujian] = useState({})
  const [tab1value, setTab1value] = useState('0')
  const [zongjia,setZongjia] = useState('￥--')
  const marginStyle = { margin: 8 }

  const [show, setShow] = useState(false)
  const [show1, setShow1] = useState(false)

  const [list1, setList1] = useState([])
  const [list2, setList2] = useState([])

  function getlist1(){
    axios.get(`http://localhost:3500/address1?user=${_id}`).then(res=>{
      setList1(res.data.data)
    })
  }

  function getlist2(){
    axios.get(`http://localhost:3500/address2?user=${_id}`).then(res=>{
      setList2(res.data.data)
    })
  }



  useEffect(() => {
    getlist1()
    getlist2()
  },[])


  const handleClick = () =>{
    window.location.href = `http://localhost:3000/jj?_id=${_id}`
  }

  const handleClick1 = () =>{
    window.location.href = `http://localhost:3000/sj?_id=${_id}`
  }

  function handleClick2(e){
    setjijian(e)
    setShow(true)
    setShowBottom(false)
  }

  function handleClick3(e){
    setshoujian(e)
    setShow1(true)
    setShowBottom1(false)
  }



  return(
    <div style={{width:'100vw',height:'100vh'}}>
      <div>
       <Tabs
        value={tab1value}
        onChange={(value) => {
          setTab1value(value)
        }}
        >
          <Tabs.TabPane title="下单">  </Tabs.TabPane>
        </Tabs>
      </div>
      <div>
        <div style={{width:'100%',height:'200px', borderRadius:'10px',backgroundColor:'#F5F5F5',margin:'0 auto'}}>
          <div style={{width:'100%',height:'60px',display:'flex',alignItems:'center',justifyContent:'space-between'
          }}>
            <div>
              <span style={{padding:'6px',borderRadius:'48%',backgroundColor:'black',color:'white',marginTop:'20px',marginLeft:'20px'}}>
                寄
              </span>
              <span>
                {
                  show ? <div style={{marginLeft:'100px'}}>
                      <span>{jijian.address}</span><br/>
                      <span>{jijian.name}{jijian.phone}</span>
                    </div>: <span style={{margin:'20px',fontWeight:'700',marginTop:'50px'}} onClick={handleClick}>新建寄件人</span>
                }
              </span>
            </div>
            <span style={{margin:'20px',fontWeight:'700',marginTop:'30px'}}>
              <Cell
                onClick={() => {
                  setShowBottom(true)
                }}
              >
              <Agenda/>
            </Cell>
            </span>
          </div>
          <hr style={{height:'2px',width:'80%',backgroundColor:'black',marginTop:'30px',border:'none'}}/>
          <div style={{width:'100%',height:'60px',display:'flex',alignItems:'center',
          marginTop:'30px',justifyContent:'space-between'
          }}>
            <div>
              <span style={{padding:'6px',borderRadius:'48%',backgroundColor:'red',color:'white',marginTop:'20px',marginLeft:'20px'}}>
                收
              </span>
              <span>
                {
                  show1 ? <div style={{marginLeft:'100px'}}>
                      <span>{shoujian.address}</span><br/>
                      <span>{shoujian.name}{shoujian.phone}</span>
                    </div>: <span style={{margin:'20px',fontWeight:'700',marginTop:'50px'}} onClick={handleClick1}>新建收件人</span>
                }
              </span>
            </div>
            <span style={{margin:'20px',fontWeight:'700',marginTop:'30px'}}>
              <Cell
                onClick={() => {
                  setShowBottom1(true)
                }}
              >
                <Agenda/>
              </Cell>
            </span>
          </div>
        </div>
      </div>

      <div style={{width:'100%',height:'100px',borderRadius:'5px',backgroundColor:'#F5F5F5',margin:'0 auto',marginTop:'20px'}}>
        <div style={{width:'100%',height:'50px',lineHeight:'50px',display:'flex',alignItems:'center',justifyContent: 'space-between'}}>
          <span>
            物品信息
          </span>
          <span style={{color:'#D6D6D6'}}>
            <Input placeholder="请填写要寄物品信息" />
          </span>
        </div>
        <div style={{width:'100%',height:'50px',lineHeight:'50px',display:'flex',alignItems:'center',justifyContent: 'space-between'}}>
          <span>
            物品信息
          </span>
          <span style={{fontWeight:'700'}}>
            寄付现结 <span style={{color:'#D6D6D6'}}>></span>
          </span>
        </div>
      </div>
      <div style={{width:'100%',height:'50px',backgroundColor:'#F5F5F5',lineHeight:'50px',position:'fixed',bottom:'6vh'}}>
        <div style={{display:'flex',justifyContent:'space-between'}}>
          <span>预估总价<span style={{color:'red'}}>{zongjia}</span></span>
          <span>
              <Button type="primary" style={marginStyle}>
                下单
              </Button>
          </span>
        </div>

      </div>
      <Popup
        visible={showBottom}
        position="bottom"
        onClose={() => {
          setShowBottom(false)
        }}
      >
        {
          list1.map((item,index) =>
            <div style={{display:'flex',justifyContent:'space-around',height:'50px',alignItems:'center',marginTop:'20px'}} onClick={handleClick2.bind(this,item)}>
              <span>
                {item.address}
              </span>
              <span>
                <span>{item.name}</span><br/>
                <span>{item.phone}</span>
              </span>
            </div>
          )
        }
      </Popup>
      <Popup
        visible={showBottom1}
        position="bottom"
        onClose={() => {
          setShowBottom1(false)
        }}
      >
          {
          list2.map((item,index) =>
            <div style={{display:'flex',justifyContent:'space-around',height:'50px',alignItems:'center',marginTop:'20px'}} onClick={handleClick3.bind(this,item)}>
              <span>
                {item.address}
              </span>
              <span>
                <span>{item.name}</span><br/>
                <span>{item.phone}</span>
              </span>
            </div>
          )
        }
      </Popup>
    </div>
  )

}
